<template>
    <div class="app-container">
        <el-card>
            <el-row :gutter="20">
                <el-col :span="0" :xs="0">
                    <div class="h_left">
                        <div class="label">访问账号</div>
                        <div>您好！欢迎使用淄博市地方征信平台</div>
                        <div>您上次的登录时间：2021-06-18</div>
                        <div class="label"> <i class="el-icon-view"></i> 快速链接 </div>
                        <div class="history">
                            <el-timeline>
                                <el-timeline-item placement="bottom" v-for="(item,index) in visitedViews" :key="index">
                                    <el-card>
                                        <h4>{{item.title}} - 淄博市地方征信平台</h4>
                                        <p class="fr">于 {{item.ptime}} 访问</p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                </el-col>
                <el-col :span="24" :xs="24">
                    <div class="h_right">
                        <el-tabs v-model="tabNum" @tab-click="handleClick">
                            <div class="h_date f14">截止统计日期: {{new Date().toLocaleString()}}</div>
                            <el-tab-pane label="信贷基本面" name="1">
                                <div class="chart-container">
                                    <MapChart :cData="d1" id="c1" height="100%" width="45%" />
                                    <PieChart :cData="d3" id="c3" height="100%" width="45%" />
                                </div>
                                <div class="chart-container">
                                    <MoreChart :cData="d2" id="c2" height="100%" width="90%" />
                                </div>
                                <div class="chart-container">
                                <template>
                                  <el-table
                                      :data="d4"
                                      style="width: 90%"
                                      height="340">
                                    <el-table-column
                                        prop="num"
                                        label="序号"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="code"
                                        label="统一社会信用代码"
                                        min-width="25%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="企业名称"
                                        min-width="35%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="industry"
                                        label="所属行业"
                                        min-width="15%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="所属区域"
                                        min-width="15%">
                                    </el-table-column>
                                  </el-table>
                                </template>
                              </div>
                            </el-tab-pane>
                            <!-- <el-tab-pane label="授信统计" name="2">
                                <div v-if="tabNum=='2'" class="data_label">
                                    <avue-data-box :option="option[tabNum-1]"></avue-data-box>
                                </div>
                                <div v-if="tabNum=='2'" class="chart-container">
                                    <chart :cData="d6" id="c6" height="100%" width="45%" />
                                    <PieChart :cData="d7" id="c7" height="100%" width="45%" />
                                </div>
                                <div v-if="tabNum=='2'" class="chart-container">
                                    <PieChart :cData="d8" id="c8" height="100%" width="45%" />
                                    <PieChart :cData="d9" id="c9" height="100%" width="45%" />
                                </div>
                            </el-tab-pane> -->
                            <el-tab-pane label="不良信贷风险" name="3">
                                <div v-if="tabNum=='3'" class="chart-container">
                                    <MoreChart :cData="d5" id="c5" height="100%" width="45%" />
                                    <PieChart :cData="d6" id="c6" height="100%" width="45%" />
                                </div>
                                <div v-if="tabNum=='3'" class="chart-container">
                                  <MoreChart :cData="d7" id="c7" height="100%" width="90%" />
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="融资担保" name="4">
<!--                                <div class="data_label" v-if="tabNum=='4'">-->
<!--                                    <avue-data-box :option="option[tabNum-1]"></avue-data-box>-->
<!--                                </div>-->
                                <div v-if="tabNum=='4'" class="chart-container">
                                    <PieChart :cData="d8" id="c8" height="100%" width="45%" />
                                    <PieChart :cData="d9" id="c9" height="100%" width="45%" />
                                </div>
                                <div v-if="tabNum=='4'" class="chart-container">
                                    <PieChart :cData="d10" id="c10" height="100%" width="45%" />
                                    <template height="100%" width="45%">
                                      <el-table
                                          :data="d4"
                                          style="width: 90%"
                                          height="400">
                                        <el-table-column
                                            prop="num"
                                            label="序号"
                                            min-width="10%">
                                        </el-table-column>
                                        <el-table-column
                                            prop="code"
                                            lab el="统一社会信用代码"
                                            min-width="25%">
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="企业名称"
                                            min-width="35%">
                                        </el-table-column>
                                      </el-table>
                                    </template>
                                </div>
                                <div v-if="tabNum=='4'" class="chart-container">
                                  <PieChart :cData="d12" id="c12" height="100%" width="45%" />
                                  <template height="100%" width="45%" style="margin-top: 20px">
                                    <el-table
                                        :data="d4"
                                        style="width: 90%"
                                        height="400">
                                      <el-table-column
                                          prop="num"
                                          label="序号"
                                          min-width="10%">
                                      </el-table-column>
                                      <el-table-column
                                          prop="code"
                                          label="统一社会信用代码"
                                          min-width="25%">
                                      </el-table-column>
                                      <el-table-column
                                          prop="name"
                                          label="企业名称"
                                          min-width="35%">
                                      </el-table-column>
                                    </el-table>
                                  </template>
                                </div>
                              <div v-if="tabNum=='4'" class="chart-container">
                                <PieChart :cData="d14" id="c14" height="100%" width="45%" />
                                <PieChart :cData="d15" id="c15" height="100%" width="45%" />
                              </div>
                              <div v-if="tabNum=='4'" class="chart-container">
                                <PieChart :cData="d16" id="c16" height="100%" width="45%" />
                                <PieChart :cData="d17" id="c17" height="100%" width="45%" />
                              </div>
                            </el-tab-pane>
                            <el-tab-pane label="风控明细" name="5">
                              <span style="fontWeight: '600';font-size: 20px;margin-top: 5px">淄博市信贷余额详情</span>
                              <div v-if="tabNum=='5'" class="chart-container">
                                <template>
                                  <el-table
                                      :data="d4"
                                      style="width: 90%"
                                      height="100%">
                                    <el-table-column
                                        prop="num"
                                        label="序号"
                                        min-width="5%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="code"
                                        label="企业名称"
                                        min-width="15%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="所属区域"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="industry"
                                        label="所属行业"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="信贷记录（条）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="信贷余额（万元）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="关注类信贷记录（条）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="关注类信贷余额（万元）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="不良信贷记录（条）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="不良信贷余额（万元）"
                                        min-width="10%">
                                    </el-table-column>
                                    <el-table-column
                                        prop="area"
                                        label="不良信贷余额占比"
                                        min-width="10%">
                                    </el-table-column>
                                  </el-table>
                                </template>
                              </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import Chart from '@c/Charts/LineMarker';
    import BarChart from '@c/Charts/BarChart';
    import PieChart from '@c/Charts/PieChart.vue';
    import MoreChart from "@c/Charts/MoreChart";
    import MapChart from "@c/Charts/MapChart";
    export default {
        components: {
          MapChart,
          MoreChart,
            Chart,
            BarChart,
            PieChart
        },
        data() {
            return {
                tabNum: '1',
                d1: {
                    // title: '客户分布图(数量/个)',
                    // cLabel: ['崇川市', '通州市', '海门市', '启东市', '如皋市', '海安市', '如东县'],
                    // cData: {}
                },
                d2: {
                    title: '淄博市信贷变动趋势',
                    cLabel: ['2021.01', '2021.02', '2021.03', '2021.04', '2021.05', '2021.06', '2021.07'],
                    cData: [{
                      name: '在贷企业数量',
                      type: 'bar',
                      color:'#330099',
                      lineWidth: 30,
                      data: [6743, 5333, 4211, 3786, 5623, 2531,7631]
                    }, {
                      name: '信贷金额（亿元）',
                      type: 'bar',
                      color:'#FF0000',
                      lineWidth: 30,
                      data: [23, 342, 213, 221, 123, 89,135]
                    }, {
                      name: '在贷企业数量同比增长率',
                      type: 'line',
                      color:'#FF7F00',
                      yAxisIndex:1,
                      lineWidth: 20,
                      data: [7, 6, 5, 4, 3, 2,7]
                    }, {
                      name: '信贷余额同比增长率',
                      type: 'line',
                      color:'#AAAAAA',
                      yAxisIndex:1,
                      lineWidth: 20,
                      data: [1, 2, 3, 4, 5, 6,1]
                    }],
                  yAxis:{
                    type: 'value',
                    name: '百分比',
                    min: 0,
                    max: 10,
                    position: 'right',
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#FF7F00'
                      }
                    },
                    axisLabel: {
                      formatter: '{value} %'
                    }
                  }
                },
                d3: {
                    title: '客户行业占比',
                    cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                    cData: [{
                            value: 60.00,
                            name: '一般行业'
                        },
                        {
                            value: 16.13,
                            name: '批发行业'
                        },
                        {
                            value: 12.16,
                            name: '计算机&电子产品'
                        },
                        {
                            value: 7.10,
                            name: '零售行业'
                        },
                        {
                            value: 3.87,
                            name: '制造业'
                        },
                        {
                            value: 0.65,
                            name: '纺织业'
                        }
                    ]
                },
              d4:[{
                num: '1',
                code:'976465414412412',
                name: '王小虎',
                industry:'纺织业',
                area: '海安市'
              }, {
                num: '2',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '3',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '4',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '5',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '如皋市'
              }, {
                num: '6',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '通州区'
              }, {
                num: '7',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '8',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '9',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }],
              d5: {
                title: '不良信贷总览',
                cLabel: ['2021.01', '2021.02', '2021.03', '2021.04', '2021.05', '2021.06', '2021.07'],
                cData: [{
                  name: '信贷金额（亿元）',
                  type: 'bar',
                  stack:'Add',
                  color:'#330099',
                  lineWidth: 30,
                  data: [6743, 5333, 4211, 3786, 5623, 2531,7631]
                }, {
                  name: '不良信贷金额（亿元）',
                  type: 'bar',
                  stack:'Add',
                  color:'#FF0000',
                  lineWidth: 30,
                  data: [23, 342, 213, 221, 123, 89,135]
                }, {
                  name: '不良企业数量',
                  type: 'line',
                  color:'#FF7F00',
                  yAxisIndex:1,
                  lineWidth: 20,
                  data: [40, 20, 50, 40, 30, 20,70]
                }],
                yAxis:{
                  type: 'value',
                  min: 0,
                  max: 100,
                  position: 'right',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#FF7F00'
                    }
                  },
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              },
                d6: {
                  title: '不良信贷区域分布',
                  cLabel: ['崇川市', '海门市', '通州市', '启东市', '如皋市', '海安市'],
                  cData: [{
                    value: 37.78,
                    name: '崇川市'
                  },
                    {
                      value: 37.78,
                      name: '海门市'
                    },
                    {
                      value: 11.49,
                      name: '通州市'
                    },
                    {
                      value: 8.56,
                      name: '启东市'
                    },
                    {
                      value: 2.69,
                      name: '如皋市'
                    },
                    {
                      value: 1.71,
                      name: '海安市'
                    }
                  ]
                },
                d7: {
                  title: '不良信贷变动趋势',
                  cLabel: ['2021.01', '2021.02', '2021.03', '2021.04', '2021.05', '2021.06', '2021.07'],
                  cData: [{
                    name: '在贷企业数量',
                    type: 'bar',
                    color:'#330099',
                    lineWidth: 30,
                    data: [6743, 5333, 4211, 3786, 5623, 2531,7631]
                  }, {
                    name: '信贷金额（亿元）',
                    type: 'bar',
                    color:'#FF0000',
                    lineWidth: 30,
                    data: [23, 342, 213, 221, 123, 89,135]
                  }, {
                    name: '在贷企业数量同比增长率',
                    type: 'line',
                    color:'#FF7F00',
                    yAxisIndex:1,
                    lineWidth: 20,
                    data: [7, 6, 5, 4, 3, 2,7]
                  }, {
                    name: '信贷余额同比增长率',
                    type: 'line',
                    color:'#AAAAAA',
                    yAxisIndex:1,
                    lineWidth: 20,
                    data: [1, 2, 3, 4, 5, 6,1]
                  }],
                  yAxis:{
                    type: 'value',
                    name: '百分比',
                    min: 0,
                    max: 10,
                    position: 'right',
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: '#FF7F00'
                      }
                    },
                    axisLabel: {
                      formatter: '{value} %'
                    }
                  }
                }, d8: {
                title: '担保债务余额',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d9: {
                title: '',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d10: {
                title: '不良担保债务余额行业分布',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d12: {
                title: '不良担保债务余额区域分布',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d14: {
                title: '互相担保信贷余额',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d15: {
                title: '',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d16: {
                title: '循环担保信贷余额',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d17: {
                title: '',
                cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
                cData: [{
                  value: 60.00,
                  name: '一般行业'
                },
                  {
                    value: 16.13,
                    name: '批发行业'
                  },
                  {
                    value: 12.16,
                    name: '计算机&电子产品'
                  },
                  {
                    value: 7.10,
                    name: '零售行业'
                  },
                  {
                    value: 3.87,
                    name: '制造业'
                  },
                  {
                    value: 0.65,
                    name: '纺织业'
                  }
                ]
              }, d18: {
                title: '淄博市信贷余额详情',
              },
              d21:[{
                num: '1',
                code:'976465414412412',
                name: '王小虎',
                industry:'纺织业',
                area: '海安市'
              }, {
                num: '2',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '3',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '4',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '5',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '如皋市'
              }, {
                num: '6',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '通州区'
              }, {
                num: '7',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '8',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }, {
                num: '9',
                code:'976465414412412',
                name: '王小虎',
                industry:'制造',
                area: '海安市'
              }],

                option: [{}, {
                        span: 6,
                        data: [{
                                title: '累计授信金额(万元)',
                                count: 12332,
                                icon: 'el-icon-box',
                                color: 'rgb(19, 161, 255)',
                            },
                            {
                                title: '剩余可用授信金额(万元)',
                                count: 33,
                                icon: 'el-icon-shopping-cart-full',
                                color: 'rgb(194, 242, 88)',
                            },
                        ]
                    },
                    {
                        span: 6,
                        data: [{
                                title: '今日放款金额(万元)',
                                count: 32,
                                icon: 'el-icon-tickets',
                                color: 'rgb(19, 161, 255)',
                            },
                            {
                                title: '本月放款金额(万元)',
                                count: 1323,
                                icon: 'el-icon-date',
                                color: 'rgb(194, 242, 88)',
                            },
                            {
                                title: '本季度放款金额(万元)',
                                count: 3242,
                                icon: 'el-icon-shopping-cart-full',
                                color: 'rgb(0, 0, 255)',
                            },
                            {
                                title: '累计放款金额(万元)',
                                count: 1242343,
                                icon: 'el-icon-shopping-cart-full',
                                color: 'rgb(212, 15, 230)',
                            },
                        ]
                    }, {
                        span: 6,
                        data: [{
                                title: '今日风险预警(条)',
                                count: 12,
                                icon: 'el-icon-tickets',
                                color: 'rgb(19, 161, 255)',
                            },
                            {
                                title: '本月风险预警(条)',
                                count: 33,
                                icon: 'el-icon-date',
                                color: 'rgb(194, 242, 88)',
                            },
                        ]
                    }, {
                    span: 6,
                    data: [{
                      title: '已授权企业(家)',
                      count: 123899,
                      icon: 'el-icon-tickets',
                      color: 'rgb(19, 161, 255)',
                    },
                      {
                        title: '未授权企业(家)',
                        count: 7997,
                        icon: 'el-icon-date',
                        color: 'rgb(194, 242, 88)',
                      },
                    ]
                  }
                ],
            }
        },
        mounted() {},
        computed: {
            visitedViews() {
                return this.$store.state.tagsView.visitedViews
            },
        },
        methods: {
            handleClick(e) {
                // debugger
            }
        }
    }
</script>

<style scoped="scoped" lang="scss">
    .border {
        border-left: 1px solid #797979;
    }

    .h_left {
        .label {
            font-size: 20px;
            font-weight: 600;
            line-height: 40px;
        }

        .history {
            .el-timeline {
                padding-left: 0;
                cursor: pointer;
            }

            /deep/ .el-card__body {
                padding: 10px;
            }
        }

    }

    .h_right {
        /deep/ .el-tabs__item {
            font-size: 20px;
            font-weight: 600;
        }

        .label {
            line-height: 40px;
        }

        .h_date {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .chart-container {
            height: 450px;
            display: flex;
        }

        .data_label {
            margin-top: 15px;
            border-bottom: 1px solid #eaeaea;
        }

    }
</style>
